import * as THREE from 'three';

// Canvas
const canvas = document.querySelector("canvas.webgl");

// Scene
const scence = new THREE.Scene();


// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({
    color: '#ff0000',
    // wireframe:true
})
const mesh = new THREE.Mesh(geometry, material);
// scence.add(mesh)

// 移动物体
// 在three.js中，x轴正向为右，y轴正向为上，z轴正向为向外(朝自己)
// mesh.position.x = 0.7
// mesh.position.y = -0.6
// mesh.position.z = 1
mesh.position.set(0.7,-0.6,1)

// 缩放
// mesh.scale.x = 1
// mesh.scale.y = 1
// mesh.scale.z = 1
mesh.scale.set(2,0.5,0.5)

// 旋转时，对应的x,y,z轴就不在初始位置了
mesh.rotation.reorder('YXZ')  //旋转旋转的优先级
// 旋转  x轴旋转 车轮    y轴旋转 直升飞机   z轴旋转  电扇
mesh.rotation.y =  Math.PI



// Group 组
const group = new THREE.Group()
group.position.y = 1
group.scale.y = 2
group.rotation.y = 1
scence.add(group)

const cube1 = new THREE.Mesh(
    new THREE.BoxGeometry(1,1,1),
    new THREE.MeshBasicMaterial({color:'#ff0000'})
)
group.add(cube1)

const cube2 = new THREE.Mesh(
    new THREE.BoxGeometry(1,1,1),
    new THREE.MeshBasicMaterial({color:'#0ff000'})
)
cube2.position.x = 2
group.add(cube2)

const cube3 = new THREE.Mesh(
    new THREE.BoxGeometry(1,1,1),
    new THREE.MeshBasicMaterial({color:'#0000ff'})
)
cube3.position.x = -2
group.add(cube3)




// AxesHelper
const axesHelper = new THREE.AxesHelper();
scence.add(axesHelper);

// 归一化 
mesh.position.normalize()
console.log(mesh.position.length())  //1


// Sizes
const Sizes = {
    width: 800,
    height: 600
}

// Camera 
// 透视相机就是  物体离得近变大，离远变小
const camera = new THREE.PerspectiveCamera(75, Sizes.width / Sizes.height)
// 相机的初始位置在（0，0，0）中心点，看不见物体，移动相机 (x,y,z)刚好和物体相反
camera.position.z = 3
scence.add(camera)

// camera.lookAt(new THREE.Vector3(0,0,0))
// camera.lookAt(mesh.position)



// Renderer
const renderer  = new THREE.WebGLRenderer({
    canvas,
})
renderer.setSize(Sizes.width,Sizes.height);
renderer.render(scence,camera);


// console.log(mesh.position.length())
// console.log(mesh.position.distanceTo(new THREE.Vector3(0,0,0)))
// console.log(mesh.position.distanceTo(camera.position))